<template>
  <div class="dashboard-editor-container">
    <!-- 公告 -->
    <div class="notice-box">
      <notice />
    </div>
    <!-- 总概 -->
    <div class="show-data">
      <overview />
    </div>
    <!-- 采购总概 -->
    <div class="procurement-box">
      <el-row type="flex" justify="space-between" class="row-bg">
        <el-col :span="7" style="margin-right:10px">
          <todoList />
        </el-col>
        <el-col :span="17">
          <div class="chart_view">
            <div style="padding-left:50px;margin-bottom: 10px;"><btnGroup title="采购趋势图" :btn-list="btnList" :current-btn-active="btnActive" @change="selectChange" /></div>
            <lineChart id="procurement_echart" heights="360px" :legend-data="legendData" :x-axis-data="xAxisData" :series-data="seriesData" />
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
import overview from './components/overview'
import btnGroup from '@/components/TopBtnGroup'
import lineChart from '@/components/Echart/line_chart'
import notice from '../common/notice'
import todoList from './components/TodoList'
import { purchaseBiDay, purchaseBiYear, purchaseBiMonth } from '@/api/data'
import formDate from '@/utils/formatDate'
export default {
  name: 'DashboardProcurement',
  components: {
    overview, lineChart, btnGroup, notice, todoList
  },
  data() {
    return {
      btnActive: 'month',
      btnList: [
        // { 'text': '当日', 'val': 'day' },
        { 'text': '本月', 'val': 'month' },
        { 'text': '本周', 'val': 'week' },
        { 'text': '季度', 'val': 'quarter' },
        { 'text': '本年', 'val': 'years' },
        { 'text': '全部', 'val': 'all' }
      ],
      xAxisData: [],
      legendData: { data: ['采购单', '采购金额', '采购总量'], selected: { '采购单': false, '采购金额': true, '采购总量': false }},
      seriesData: [
        {
          name: '采购单',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '采购金额',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '采购总量',
          type: 'line',
          stack: '总量',
          data: []
        }
      ]
    }
  },
  created() {
    // 默认按本月
    const start = formDate.getMonthStartDate()
    const end = formDate.getMonthEndDate()
    this.purchaseBiDay(start, end, 'day_month')
  },
  methods: {
    async purchaseBiYear() { // 年报 获取全部
      const param = { pageIndex: 0,
        pageSize: 100,
        queryList: [
          { 'key': 'o.createDate', 'value': '1970-01-01 09:00:00', 'oper': '>=', 'join': 'and' },
          { 'key': 'o.createDate', 'value': new Date(), 'oper': '<=', 'join': 'and' }
        ],
        sortFields: 'createYear_d'
      }
      const result = await purchaseBiYear(param)
      if (result.code === 200) this.dealData(result.data, 'years')
      else this.$message.error('图表数据请求错误')
    },
    async purchaseBiDay(start, end, type) { // 日报
      console.log('purchaseBiDay api type = ' + type)
      const param = { pageIndex: 0,
        pageSize: 100,
        queryList: [
          { 'key': 'o.createDate', 'value': start, 'oper': '>=', 'join': 'and' },
          { 'key': 'o.createDate', 'value': end, 'oper': '<=', 'join': 'and' }
        ],
        sortFields: 'createDate_d'
      }
      const result = await purchaseBiDay(param)
      if (result.code === 200) this.dealData(result.data, type)
      else this.$message.error('图表数据请求错误')
    },
    async purchaseBiMonth(start, end) { // 月报
      const param = { pageIndex: 0,
        pageSize: 100,
        queryList: [
          { 'key': 'o.createDate', 'value': start, 'oper': '>=', 'join': 'and' },
          { 'key': 'o.createDate', 'value': end, 'oper': '<=', 'join': 'and' }
        ],
        sortFields: 'createMonth_d'
      }
      const result = await purchaseBiMonth(param)
      if (result.code === 200) this.dealData(result.data, 'month')
      else this.$message.error('图表数据请求错误')
    },
    // 数据处理
    dealData(data, dateType) {
      this.xAxisData = []
      this.seriesData[0].data = []
      this.seriesData[1].data = []
      this.seriesData[2].data = []
      const arr = data.records
      arr.forEach(element => {
        if (dateType === 'day_week') {
          const str = element.createDate
          this.xAxisData.unshift(formDate.getAssignDateWeek(str))
        } else if (dateType === 'day_month') {
          const str = element.createDate
          this.xAxisData.unshift(formDate.getDateTimeDate(str))
        } else if (dateType === 'month') {
          const str = element.createDate
          this.xAxisData.unshift(formDate.getYearMonth(str))
        } else if (dateType === 'years') {
          // const str = element.createDate
          // this.xAxisData.unshift(formDate.getYearMonth(str))
          this.xAxisData.unshift(element.createYear)
        }
        this.seriesData[0].data.unshift(element.orderCount)
        this.seriesData[1].data.unshift(element.orderSales)
        this.seriesData[2].data.unshift(element.orderWeight)
        // this.seriesData[3].data.unshift(element.logisticsTotalWeight)
      })
    },
    selectChange(val) {
      const WeekStartDate = formDate.getWeekStartDate()
      const WeekEndDate = formDate.getWeekEndDate()
      const monthStartDate = formDate.getMonthStartDate()
      const monthEndDate = formDate.getMonthEndDate()
      const quarterStartDate = formDate.getQuarterStartDate()
      const quarterEndDate = formDate.getQuarterEndDate()
      const yearsStartDate = formDate.getYearStartDate()
      const yearsEndDate = formDate.getYearEndDate()
      switch (val) {
        case 'all': // 全部
          this.purchaseBiYear()
          break
        case 'day': // 本日
          // this.init(0)
          break
        case 'week': // 本周
          this.purchaseBiDay(WeekStartDate, WeekEndDate, 'day_week')
          break
        case 'month': // 本月
          this.purchaseBiDay(monthStartDate, monthEndDate, 'day_month')
          break
        case 'quarter': // 本季度
          this.purchaseBiMonth(quarterStartDate, quarterEndDate)
          break
        case 'years': // 本年
          this.purchaseBiMonth(yearsStartDate, yearsEndDate)
          break
        default:
          break
      }
    }
  }
}
</script>
<style scoped lang='scss'>
  .show-data{
    margin-top: 10px;
    border-radius: 5px;
    background: white;

  }
  .procurement-box{
     margin-top: 10px;
     border-radius: 5px;
     padding-bottom:30px ;

  }
  .chart_view,.todoList{
    padding:20px;
    background: white;
    height: 460px;
  }
  // .list_title{
  //   font-weight: bold;
  // }
  // .list_item li{
  //   border: 1px solid #eee;
  //   padding: 10px 15px;
  //   list-style-type:none;
  //   margin-bottom: 10px;
  //   cursor:pointer;
  // }
  // .right_span{float:right;}
</style>
